<template>
  <div class="order">
    <!-- header -->
    <el-card>
      <el-form ref="form" :model="form" :inline="true">
        <el-row class="row">
          <el-col>
            <span>服务类型：</span>
            <el-select v-model="form.value" placeholder="请选择" size="mini">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col>
            <el-form-item label="创建时间：" prop="logistics">
              <el-date-picker
                style="width: 300px"
                size="mini"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="form.value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item>
              <el-button type="primary" size="mini" icon="el-icon-search" @click="search">查询</el-button>
              <el-button type="primary" size="mini" icon="el-icon-refresh" @click="resetForm">重置</el-button>
              <el-button type="primary" size="mini" icon="el-icon-refresh" @click="exportfile">导出</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 表格列表 -->
    <el-card>
      <!-- 导航栏 -->

      <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-bottom: 20px">
        <!-- 全部订单 -->
        <el-tab-pane label="全部订单" name="first">
          <el-button size="mini" type="primary" @click="payrouter" style="margin: 20px 0">支付</el-button>
          <el-button size="mini" type="primary" style="margin: 20px 20px" @click="centerDialogVisible = true">开具发票</el-button>
          <el-table ref="multipleTable" :data="Alllist" tooltip-effect="dark" style="width: 100%" show-header fit align>
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="orderNumber" label="订单编号">
              <!--     <template slot-scope="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column prop="serviceType" label="服务类型">
              <template slot-scope="scope">
                <span v-if="scope.row.serviceType == '1'">房屋租赁</span>
                <span v-if="scope.row.serviceType == '2'">仓储租赁</span>
                <span v-if="scope.row.serviceType == '3'">会议室租赁 </span>
                <span v-if="scope.row.serviceType == '4'">活动场地租赁</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderType" label="订单类型" >
              <template slot-scope="scope">
                <span v-if="scope.row.orderStatus == '0'">待支付</span>
                <span v-if="scope.row.orderStatus == '1'">已支付</span>
                <span v-if="scope.row.orderStatus == '2'">已取消</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalAmount" label="订单金额(元)"  style="color: #ff5f5f">
              <!--  <span style="color:#ff5f5f">{{orderAmount}}</span> -->
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" ></el-table-column>
            <el-table-column prop="orderStatus" label="订单状态" >
              <template slot-scope="scope">
                <span v-if="scope.row.orderStatus == '0'">待支付</span>
                <span v-if="scope.row.orderStatus == '1'">已支付</span>
                <span v-if="scope.row.orderStatus == '2'">已取消</span>
              </template>
            </el-table-column>
            <el-table-column prop="updateDate" label="更新时间"></el-table-column>
            <el-table-column label="是否开票">
              <template slot-scope="scope">
                <span v-if="scope.row.invoiceTag == '0'">否</span>
                <span v-if="scope.row.invoiceTag == '1'">是</span>
                <span v-if="scope.row.invoiceTag == null">没有数据</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="details(scope.row)">详情</el-button>

                <el-button type="text" @click="Cancel(scope.row)">取消订单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 待支付 -->
        <el-tab-pane label="待支付订单" name="second">
          <el-button size="mini" type="primary" @click="payrouter" style="margin: 20px 0">支付</el-button>
          <el-button size="mini" type="primary" style="margin: 20px 20px" @click="centerDialogVisible = true">开具发票</el-button>
          <el-table ref="multipleTable" :data="Alllist" tooltip-effect="dark" style="width: 100%" show-header fit align>
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="orderNumber" label="订单编号">
              <!--     <template slot-scope="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column prop="serviceType" label="服务类型">
              <template slot-scope="scope">
                <span v-if="scope.row.serviceType == 1">房屋租赁</span>
                <span v-if="scope.row.serviceType == 2">仓储租赁</span>
                <span v-if="scope.row.serviceType == 3">会议室租赁 </span>
                <span v-if="scope.row.serviceType == 4">活动场地租赁</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderType" label="订单类型" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.orderStatus == 0">待支付</span>
                <span v-if="scope.row.orderStatus == 1">已支付</span>
                <span v-if="scope.row.orderStatus == 2">活动场地租赁</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalAmount" label="订单金额(元)" show-overflow-tooltip style="color: #ff5f5f">
              <!--  <span style="color:#ff5f5f">{{orderAmount}}</span> -->
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="orderStatus" label="订单状态" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.orderStatus == 0">待支付</span>
                <span v-if="scope.row.orderStatus == 1">已支付</span>
                <span v-if="scope.row.orderStatus == 2">已取消</span>
              </template>
            </el-table-column>
            <el-table-column prop="updateDate" label="更新时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="invoiceTag" label="是否开票" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.invoiceTag == 0">否</span>
                <span v-if="scope.row.invoiceTag == 1">是</span>
                <span v-if="scope.row.invoiceTag == null">不知道</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="details(scope.row)">详情</el-button>

                <el-button type="text" @click="Cancel(scope.row)">取消订单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 已支付 -->
        <el-tab-pane label="已支付" name="third">
          <el-button size="mini" type="primary" @click="payrouter" style="margin: 20px 0">支付</el-button>
          <el-button size="mini" type="primary" style="margin: 20px 20px" @click="centerDialogVisible = true">开具发票</el-button>
          <el-table ref="multipleTable" :data="Alllist" tooltip-effect="dark" style="width: 100%" show-header fit align>
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="orderNumber" label="订单编号">
              <!--     <template slot-scope="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column prop="serviceType" label="服务类型">
              <template slot-scope="scope">
                <span v-if="scope.row.serviceType == 1">房屋租赁</span>
                <span v-if="scope.row.serviceType == 2">仓储租赁</span>
                <span v-if="scope.row.serviceType == 3">会议室租赁 </span>
                <span v-if="scope.row.serviceType == 4">活动场地租赁</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderType" label="订单类型" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.orderStatus == 0">待支付</span>
                <span v-if="scope.row.orderStatus == 1">已支付</span>
                <span v-if="scope.row.orderStatus == 2">活动场地租赁</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalAmount" label="订单金额(元)" show-overflow-tooltip style="color: #ff5f5f">
              <!--  <span style="color:#ff5f5f">{{orderAmount}}</span> -->
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="orderStatus" label="订单状态" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.orderStatus == 0">待支付</span>
                <span v-if="scope.row.orderStatus == 1">已支付</span>
                <span v-if="scope.row.orderStatus == 2">已取消</span>
              </template>
            </el-table-column>
            <el-table-column prop="updateDate" label="更新时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="invoiceTag" label="是否开票" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.invoiceTag == 0">否</span>
                <span v-if="scope.row.invoiceTag == 1">是</span>
                <span v-if="scope.row.invoiceTag == null">没有数据</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="details(scope.row)">详情</el-button>

                <el-button type="text" @click="Cancel(scope.row)">取消订单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 已退款 -->
        <el-tab-pane label="退款订单" name="fourth">
          <el-button size="mini" type="primary" @click="payrouter" style="margin: 20px 0">支付</el-button>
          <el-button size="mini" type="primary" style="margin: 20px 20px" @click="centerDialogVisible = true">开具发票</el-button>
          <el-table ref="multipleTable" :data="Alllist" tooltip-effect="dark" style="width: 100%" show-header fit align>
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="originalOrderNumber" label="订单编号"></el-table-column>

            <el-table-column prop="refundType" label="退款类型">
              <template slot-scope="scope">
                <span v-if="scope.row.refundType == '1'">租赁保证金</span>
                <span v-if="scope.row.refundType == '2'">装修保证金</span>
                <span v-if="scope.row.refundType == '3'">会议租赁保证金 </span>
                <span v-if="scope.row.refundType == '4'">活动场地租赁保</span>
              </template>
            </el-table-column>
            <el-table-column prop="refundAmount" label="申请退款金额(元)"> </el-table-column>
            <el-table-column prop=" refundStatus" label="退款状态" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.refundStatus == '0'">待审核</span>
                <span v-if="scope.row.refundStatus == '1'">退款中</span>
                <span v-if="scope.row.refundStatus == '2'">已退款</span>
                <span v-if="scope.row.refundStatus == '3'">已驳回</span>
              </template>
            </el-table-column>

            <el-table-column prop="createDate" label="创建时间" show-overflow-tooltip></el-table-column>

            <el-table-column prop="updateDate" label="更新时间" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 已取消订单 -->
        <el-tab-pane label="已取消订单" name="fo">
          <el-button size="mini" type="primary" @click="payrouter" style="margin: 20px 0">支付</el-button>
          <el-button size="mini" type="primary" style="margin: 20px 20px" @click="centerDialogVisible = true">开具发票</el-button>
          <el-table ref="multipleTable" :data="Alllist" tooltip-effect="dark" style="width: 100%" show-header fit align>
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="orderNumber" label="订单编号">
              <!--     <template slot-scope="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column prop="serviceType" label="服务类型">
              <template slot-scope="scope">
                <span v-if="scope.row.serviceType == 1">房屋租赁</span>
                <span v-if="scope.row.serviceType == 2">仓储租赁</span>
                <span v-if="scope.row.serviceType == 3">会议室租赁 </span>
                <span v-if="scope.row.serviceType == 4">活动场地租赁</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderType" label="订单类型" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.orderStatus == 0">待支付</span>
                <span v-if="scope.row.orderStatus == 1">已支付</span>
                <span v-if="scope.row.orderStatus == 2">活动场地租赁</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalAmount" label="订单金额(元)" show-overflow-tooltip style="color: #ff5f5f">
              <!--  <span style="color:#ff5f5f">{{orderAmount}}</span> -->
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="orderStatus" label="订单状态" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.orderStatus == 0">待支付</span>
                <span v-if="scope.row.orderStatus == 1">已支付</span>
                <span v-if="scope.row.orderStatus == 2">已取消</span>
              </template>
            </el-table-column>
            <el-table-column prop="updateDate" label="更新时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="invoiceTag" label="是否开票" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.invoiceTag == 0">否</span>
                <span v-if="scope.row.invoiceTag == 1">是</span>
                <span v-if="scope.row.invoiceTag == null">没有数据</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="details(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 按钮 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        :page-sizes="[10, 20, 40, 60]"
        :page-size.sync="size"
        layout="prev, pager, next,sizes, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!--详情弹框 -->

    <el-dialog title="开具发票" :visible.sync="centerDialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="60%">
      <el-form v-model="detialFrom">
        <el-row>
          <el-col :span="8">
            <el-form-item label="发票抬头：" label-width="130px">
              <el-input size="mini" placeholder="请填写发票抬头" v-model="detialFrom.invoiceHead"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="纳税人识别号：" label-width="130px">
              <el-input size="mini" placeholder="请填写纳税人识别号" v-model="detialFrom.number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否开票：" label-width="130px">
              <el-select placeholder="是否开票" style="width: 60%" v-model="detialFrom.isInvoice" size="mini">
                <el-option v-for="item in type" :key="item.value" :label="item.laber" :value="item.value" size="mini"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="应缴金额：" label-width="130px">
              <el-input size="mini" placeholder="请填写应缴金额" v-model="detialFrom.payMoney"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建人：" label-width="130px">
              <el-input size="mini" placeholder="请填写创建人" v-model="detialFrom.createBy"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发票类型" label-width="130px">
              <el-select size="mini" placeholder="请选择发票类型" style="width: 60%" v-model="detialFrom.invoiceType">
                <el-option v-for="item in type1" :key="item.value" :label="item.laber" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="增值税发票票号：" label-width="130px">
              <el-input size="mini" placeholder="请填写增值税发票票号" v-model="detialFrom.invoiceNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账号类型" label-width="130px">
              <el-button size="small" @click="detialFrom.payType = 1">个人账号</el-button>
              <el-button size="small" @click="detialFrom.payType = 2">公司账号</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="Invoice" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//时间格式化
Date.prototype.Format = function (fmt) {
  //author: meizz
  var o = {
    'M+': this.getMonth() + 1, //月份开发票
    'd+': this.getDate(), //日
    'h+': this.getHours(), //小时
    'm+': this.getMinutes(), //分
    's+': this.getSeconds(), //秒
    'q+': Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds(), //毫秒
  }
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
  for (var k in o) if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
  return fmt
}

import { getlist, searchlist, Arefundorders, Canceltheorder, exportfils, Makeinvoic } from './index.js' /* api */
import { setItem } from '@/utils/store.js'
import { getItem } from '../../../utils/store.js'

export default {
  name: 'Order',
  props: {},
  data() {
    return {
      // orderStatus:null,
      value1: '',
      value2: '',
      name: '全部订单',
      companyId: '',
      beginTime: '',
      endTime: '',
      orderStatus: -1,
      current: 1,
      size: 10,
      total: null, // 获取数据的总条数
      Alllist: [], // 获取全部订单列表
      options: [
        {
          value: 1, //级联选择配置表
          label: '房屋租赁',
        },
        {
          value: 2,
          label: '仓储租赁',
        },
        {
          value: 3,
          label: '会议室租赁',
        },
        {
          value: 4,
          label: '活动场地租赁',
        },
      ],
      //开票类型
      type: [
        {
          value: '1',
          laber: '是',
        },
        {
          value: '2',
          laber: '否',
        },
      ],
      type1: [
        {
          value: '1',
          laber: '纸质',
        },
        {
          value: '2',
          laber: '增值',
        },
      ],
      // 选中的value值
      radio1: '上海', // 后期获取的table表格数据

      activeName: 'first', // 标签页高亮
      form: {
        value1: [new Date(), new Date()], // 筛选时间
        // 表头查询部分数据
        value: '',
        creattime: '', //创建时间
      },

      multipleSelection: [], //全选
      detialFrom: {
        externalId: '134', //根据接口提示暂传订单id
        payType: '',
        isInvoice: '', //是否开票1是2否
        invoiceHead: '7', // 发票抬头
        number: '', // number
        invoiceNumber: '', // 增值税发票票号
        invoiceType: '', //发票类型
        payMoney: '', //应缴金额
        createBy: '', //创建人
      },
      centerDialogVisible: false, // 弹框
    }
  },
  components: {},
  watch: {},
  created() {
    this.companyId = getItem('USER_INFO').data.data.companyId
    },
  mounted() {
    this.getuserlist() // 页面加载获取订单数据
    //this.companyId = getItem('USER_INFO').data.data.companyId
    //console.log(this.companyId,'0000');
  },
  methods: {
    // 时间格式化

    // 获取订单列表全部
    async getuserlist() {
      let that = this
      let sear = {
        companyId:getItem('USER_INFO').data.data.companyId,//获取订单传值id
        current: that.current,
        size: that.size,
        orderStatus: that.orderStatus,
      }
      try {
        const { data } = await getlist(sear)
        //this.$message.success('获取成功')
        this.Alllist = data.data.records
        this.total = data.data.total
        this.companyId = data.data.records.companyIds
        console.log(data, '订单列表', this.orderStatus)
      } catch (error) {
        console.log(error)
        this.$message('获取失败稍后重试')
      }
    },

    //退款订单
    async getuserArefundorders() {
      try {
        let id = {
          companyId: getItem('USER_INFO').data.data.companyId,
        }
        console.log(id.companyId)
        const { data } = await Arefundorders(id)
        this.Alllist = data.data.records
        this.total = data.data.total
        console.log(data, '已退款订单列表')
      } catch (error) {
        console.log(error)
        this.$message('获取失败稍后重试')
      }
    },

    payrouter() {
      this.$router.push({ path: '/payment', query: { money: 2020 } }) // 支付金额
    },
    details(row) {
      // let id = row.id
      this.$router.push({ path: '/orderist', query: { row: row } })
      console.log(row)
      setItem('id', row.id)
      setItem('serviceType', row.serviceType)
    },
    handleClick(tab) {
      if (tab.name === 'first') {
        this.orderStatus = -1
        this.name = '全部订单'
        this.getuserlist() //获取全部
      }
      if (tab.name === 'second') {
        this.orderStatus = 0

        this.name = '待支付订单'

        this.getuserlist() // 待支付订单
        // this.orderStatus = ''
      }
      if (tab.name === 'third') {
        this.orderStatus = 1
        this.name = '已支付订单'
        this.getuserlist() //已支付
        // this.orderStatus = ''
      }
      if (tab.name === 'fourth') {
        this.getuserArefundorders() // 退款订单
        this.name = '已退款订单'
      }
      if (tab.name === 'fo') {
        //已经取消
        this.name = '已取消订单'
        this.orderStatus = 2
        this.getuserlist()
        //this.orderStatus = ''
      }
    },
    // 页面分页
    handleSizeChange(val) {
      this.size = val
      this.getuserlist()
    },
    handleCurrentChange(val) {
      this.current = val
      this.getuserlist()
    },
    resetForm() {
      //重置按钮
      this.form.value = ''
      this.form.logisticsNum = ''
      this.form.value1 = ''
    },
    async search() {
      try {
      // 筛选查询
        if(this.form.value1){
          let time = this.form.value1[0]
          let time1 = this.form.value1[1]
          let datat = {
            beginTime: time,
            endTime: time1,
          }
          datat.serviceType=this.form.value
          const { data } = await searchlist(datat)
          console.log(data)
          this.Alllist = []
          this.Alllist = data.data.records
        }
      } catch (error) {
         console.log(error)
      }
      // var time11 = time.Format('yyyy-MM-dd hh:mm:ss')
      // var time22 = time1.Format('yyyy-MM-dd hh:mm:ss')
      // this.beginTime=time11
      // this.endTime=time22
      // console.log(time11, time22)
    },
      async Cancel(row) {
        // 取消订单模块
        let ids = row.id
        try {
          const { data } = await Canceltheorder(ids)
          this.$message.success('取消订单成功')
          this.getuserlist()
          console.log(data)
        } catch (error) {
          console.log(error)
        }
    },
    // 导出订单
    async exportfile() {
      let datas = {
        serviceType: this.form.value,
        beginTime: this.beginTime,
        endTime: this.endTime,
        orderStatus: this.orderStatus,
        companyId: getItem('USER_INFO').data.data.companyId,
      }
      try {
        console.log(datas.orderStatus)
        const data = await exportfils(datas)
        console.log(data, '导出文件')
        let blob = data.data
        const fileReader = new FileReader()
        fileReader.readAsDataURL(blob)
        fileReader.onload = (event) => {
          let a = document.createElement('a')
          let _fileName = `${this.name}.xls`
          a.download = _fileName
          a.href = event.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
      } catch (error) {
        console.log(error)
      }
    },
    /* 开票 */
    Invoice() {
      //console.log(this.detialFrom, '开票数据')
      Makeinvoic(this.detialFrom).then((res) => {
        if (res.data.code == 0) {
          this.$message.success('开票成功')
          this.detialFrom=''
          this.centerDialogVisible=false
        }
        console.log(res)
      })
    },
  },
}
</script>

<style scoped lang="less">
.order {
  width: 100%;
  .dialog {
    display: flex;
    //justify-content: space-evenly;
    .el-dialog__title {
      color: yellow;
    }
    .el-dialog__header {
      border-bottom: 1px solid #000;
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
    .el-button {
      width: 100px;
      margin-right: 50px;
    }
  }
  .row {
    display: flex;
    align-self: center;
    justify-content: start;
  }
}
</style>
